<template>
  <div class="app-container">
    <el-row class="app-toolbar">
      <el-button class="el-fl" type="text" @click="deleteBatch" style="color: #e63131;">批量删除</el-button>
      <el-button class="el-fr" type="primary" @click="createRow">新增</el-button>
    </el-row>
    <el-table v-loading="listLoading" :data="datas" :empty-text="empty_text" element-loading-text="Loading" border fit stripe highlight-current-row>
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column label="序号" align="center" width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="id" label="ID" align="center" width="120"></el-table-column> -->
      <el-table-column label="封面" align="center" width="280">
        <template slot-scope="scope">
          <img v-if="scope.row.commodityImgurl" class="el-item-img" :src="_get_img_src(scope.row.commodityImgurl)" alt="" />
          <img v-else src="@/assets/image/goods_default.png" class="el-item-img" />
        </template>
      </el-table-column>
      <el-table-column label="系统名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.commodityName }}
        </template>
      </el-table-column>
      <el-table-column label="机构类型" align="center" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.commodityRole == 1">
            学校
          </template>
          <template v-else-if="scope.row.commodityRole == 2">
            培训学校
          </template>
        </template>
      </el-table-column>
      <el-table-column label="收费制" align="center" width="80">
        <template slot-scope="scope">
          <template v-if="scope.row.beOverdue == 1">
            免费
          </template>
          <template v-else-if="scope.row.beOverdue == 2">
            包月
          </template>
          <template v-else-if="scope.row.beOverdue == 3">
            包年
          </template>
        </template>
      </el-table-column>
      <el-table-column label="收费价格" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="updateRow(scope.row)">编辑</el-button>
          <!-- <el-button type="infor" size="small" @click="detailRow(scope.row)">查看</el-button> -->
          <el-button type="danger" size="small" @click="deleteRow(scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :page-size="listPages.size"
      :current-page="listPages.page"
      :total="listPages.total"
      :page-sizes="listPages.sizes"
      @size-change="_page_size_change"
      @prev-click="_page_prev_click"
      @current-change="_page_current_change"
      @next-click="_page_next_click"
    ></el-pagination>

    <el-dialog :title="formDialog.title" :visible.sync="formDialog.visible" :width="formDialog.width" :center="formDialog.center">
      <el-form ref="serviceForm" :model="formData" :rules="rules">
        <el-form-item label="服务系统" :label-width="formLabelWidth" prop="projectId">
          <el-select v-model="formData.projectId" placeholder="请选择服务系统">
            <template v-for="data in systemList">
              <el-option :key="data.id" :label="data.name" :value="data.id"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="机构类型" :label-width="formLabelWidth" prop="commodityRole">
          <el-select v-model="formData.commodityRole" placeholder="请选择机构类型">
            <el-option label="学校" value="1"></el-option>
            <el-option label="培训学校" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收费机制" :label-width="formLabelWidth" prop="beOverdue">
          <el-radio-group v-model="formData.beOverdue">
            <el-radio :label="1">免费</el-radio>
            <el-radio :label="2">包月</el-radio>
            <el-radio :label="3">包年</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.beOverdue != 1" label="收费价格" :label-width="formLabelWidth">
          <!-- &yen; -->
          <el-input v-model="formData.price" :precision="2" :step="0.1" style="width: 12.5rem" onkeyup="value=value.match(/\d+\.?\d{0,2}/,'')"></el-input>
          元
        </el-form-item>
        <el-form-item label="封面" :label-width="formLabelWidth" prop="commodityImgurl">
          <UploaderImage :key="keys.UploaderImage" :options="optionsUploaderImage" @backUploaderImage="backUploaderImage"></UploaderImage>
        </el-form-item>
        <el-form-item label="内容详情" :label-width="formLabelWidth">
          <Kindeditor :key="keys.Kindeditor" :content="formData.content" @backKindeditor="_fromKindeditor"></Kindeditor>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="_formDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
<style lang="scss" scoped src="./index.scoped.scss"></style>
